<template>
  <div class="page">

    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" />
        </button>
        <h3>个人信息</h3>
      </div>
    </div>


    <div class="context">
      <!-- 主容器 -->
      <div class="container">
        <!-- 第一行 -->
        <div class="row">
          <span class="label">工号</span>
          <span class="value">701256</span>
        </div>
        <div class="divider"></div>

        <!-- 第二行 -->
        <div class="row">
          <span class="label">头像</span>
          <div class="right">
            <img class="avatar" src="@/assets/xiangmujindu/img_gcs.png" alt="头像" />
            <img class="icon" src="@/assets/xiangmujindu/arrow_right.png" alt="右箭头" />
          </div>
        </div>
        <div class="divider"></div>

        <!-- 第三行 -->
        <div class="row">
          <span class="label">姓名</span>
          <div class="right">
            <span class="value">刘志杰</span>
            <img class="icon" src="@/assets/xiangmujindu/arrow_right.png" alt="右箭头" />
          </div>
        </div>
        <div class="divider"></div>

        <!-- 第四行 -->
        <div class="row">
          <span class="label">手机号</span>
          <div class="right">
            <span class="value">137****2296</span>
            <img class="icon" src="@/assets/xiangmujindu/arrow_right.png" alt="右箭头" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "ProfileInfo",
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  }
};
</script>

<style scoped>
/* 页面样式 */
.page {
  font-size: 13px;
  background-color: #f4f5f9;
  min-height: 100vh;
}


.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  background: #f4f5f9;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  background: #f4f5f9;
}


/* 主容器样式 */
.container {
    margin-top:10px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 10px;
}

/* 行样式 */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

/* 左侧文本框样式 */
.label {
  color: #333333;
}

/* 右侧文本框样式 */
.value {
  color: #9d9e9f;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: #f4f5f9;
  width: 100%;
}

/* 第二行头像样式 */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-right: 5px;
}

/* 右侧内容容器 */
.right {
  display: flex;
  align-items: center;
}

/* 右侧图标样式 */
.icon {
  width: 20px;
  height: 20px;
}
</style>
